<template>
    <div v-if="screenWidth > 1025">
        <div class="block">
            <template v-if="screenWidth > 1920">
                <el-carousel :interval="3000" arrow="always" :autoplay="true" :loop="true" height="950px">
                    <el-carousel-item v-for="(image, index) in images" :key="index">
                        <img v-if="image.imageUrl" :src="image.imageUrl" alt="carousel image"
                            style="width: 100%; max-height: 950px; height: auto; object-fit: cover;">
                    </el-carousel-item>
                </el-carousel>
            </template>
            <template v-else-if="screenWidth > 1025 && screenWidth <= 1920">
                <el-carousel :interval="3000" arrow="always" :autoplay="true" :loop="true" height="720px">
                    <el-carousel-item v-for="(image, index) in images" :key="index">
                        <img v-if="image.imageUrl" :src="image.imageUrl" alt="carousel image"
                            style="width: 100%; max-height: 720px; height: auto; object-fit: cover;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div class="service-container">
            <el-row :gutter="10">
                <el-col :md="5" :xl="4" :lg="5" v-for="(service, index) in services" :key="index">
                    <div class="service-item">
                        <div class="service-image-container">
                            <img :src="service.image" alt="" class="service-image">
                        </div>
                        <div class="service-a-container">
                            <a href="javascript:void(0);" class="service-title">{{ service.title }}</a>
                        </div>
                        <div class="service-desc-container">
                            <p class="service-description">{{ service.description }}</p>
                        </div>
                        <div class="service-link-container">
                            <a target="_self" @click="$router.push(service.link)" class="service-links">了解更多</a>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <template v-if="options.src">
                <div class="video">
                    <vue3VideoPlay v-bind="options" />
                </div>
            </template>
            <div class="product-intro-container">
                <div class="text-container">
                    <h2 style="color: #FFA500;">TM241C</h2>
                    <h1>手持式智能导览机</h1>
                    <strong>博物馆 | 城市游 | 景区</strong>
                    <ul>
                        <li>全面触摸屏</li>
                        <li>多种触发模式</li>
                        <li>GPS北斗双模定位</li>
                        <li>电池续航长达12小时</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="image-container">
                    <img v-if="contentImg[0]" :src="contentImg[0].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[1]"
                :style="{ backgroundImage: `url(${contentImg[1].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>共享租赁</span>
                        <strong class="p1">轻巧便携</strong>
                        <span>多语言讲解语音</span>
                        <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="images-container">
                    <img v-if="contentImg[2]" :src="contentImg[2].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TM601</h2>
                    <h1>巴士多语言讲解系统</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>工业级材料</li>
                        <li>云端服务器管理</li>
                        <li>一键更新所有子机</li>
                        <li>多路语言同步播放互不影响</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[3]"
                :style="{ backgroundImage: `url(${contentImg[3].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>乘客统计</span>
                        <strong class="p1">安装简单</strong>
                        <span>可连接无线话筒</span>
                        <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="text-container3">
                    <h2>TM901 VOD</h2>
                    <h1>车载多功能娱乐系统</h1>
                    <strong>音乐 | 电影 | 小游戏</strong>
                    <ul>
                        <li>多语言界面</li>
                        <li>Android系统</li>
                        <li>景点同步讲解</li>
                        <li>四核 CortexTM-A7 处理器</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="images-container">
                    <img v-if="contentImg[4]" :src="contentImg[4].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container2" v-if="contentImg[5]"
                :style="{ backgroundImage: `url(${contentImg[5].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>千兆网口</span>
                        <strong class="p1">结实防震</strong>
                        <span>全隔离信号通道</span>
                        <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="images-container">
                    <img v-if="contentImg[6]" :src="contentImg[6].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>MINI024C</h2>
                    <h1>智能公交报站器</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>云端管理</li>
                        <li>拓展接口丰富</li>
                        <li>智能自动化触发</li>
                        <li>高精度矢量数学对比算法</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[7]"
                :style="{ backgroundImage: `url(${contentImg[7].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>抗电磁干扰</span>
                        <strong class="p1">即时定位</strong>
                        <span>可连接LED显示屏</span>
                        <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="text-container3">
                    <h2>TAMO MONITOR</h2>
                    <h1>LED显示屏</h1>
                    <strong>广告 | 宣传片 | 站点信息</strong>
                    <ul>
                        <li>全网通</li>
                        <li>TFT液晶屏</li>
                        <li>四核 1.2GHz 主频</li>
                        <li>Android 7.1 及以上操作系统</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="image-container">
                    <img v-if="contentImg[10]" :src="contentImg[10].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container2" v-if="contentImg[11]"
                :style="{ backgroundImage: `url(${contentImg[11].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>响应速度快</span>
                        <strong class="p1">金属外壳</strong>
                        <span>标配信息发布系统</span>
                        <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container" style="width: 800px;">
                <div class="image-container">
                    <img v-if="contentImg[12]" :src="contentImg[12].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TAMO HEADSET</h2>
                    <h1>耳机</h1>
                    <strong>舒适聆听体验</strong>
                    <ul>
                        <li>高音质</li>
                        <li>3.5mm接口</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'ej', query: { id: 6 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
    </div>
    <div v-if="screenWidth > 768 && screenWidth <= 1024">
        <div class="block">
            <el-carousel :interval="3000" arrow="always" :autoplay="true" :loop="true" height="510px">
                <el-carousel-item v-for="(image, index) in images" :key="index">
                    <img v-if="image.imageUrl" :src="image.imageUrl" alt="carousel image"
                        style="max-width: 100%; height: auto; object-fit: cover;">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="service-container">
            <el-row :gutter="10">
                <el-col :md="6" :sm="6" v-for="(service, index) in services" :key="index">
                    <div class="service-item">
                        <div class="service-image-container">
                            <img :src="service.image" alt="" class="service-image">
                        </div>
                        <div class="service-a-container">
                            <a href="javascript:void(0);" class="service-title">{{ service.title }}</a>
                        </div>
                        <div class="service-desc-container">
                            <p class="service-description">{{ service.description }}</p>
                        </div>
                        <div class="service-link-container">
                            <a target="_self" @click="$router.push(service.link)" class="service-link">了解更多</a>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <template v-if="options.src">
                <div class="video">
                    <vue3VideoPlay v-bind="options" />
                </div>
            </template>
            <div class="product-intro-container">
                <div class="text-container">
                    <h2 style="color: #FFA500;">TM241C</h2>
                    <h1>手持式智能导览机</h1>
                    <strong>博物馆 | 城市游 | 景区</strong>
                    <ul>
                        <li>全面触摸屏</li>
                        <li>多种触发模式</li>
                        <li>GPS北斗双模定位</li>
                        <li>电池续航长达12小时</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="image-container">
                    <img v-if="contentImg[0]" :src="contentImg[0].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[1]"
                :style="{ backgroundImage: `url(${contentImg[1].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>共享租赁</span>
                        <strong class="p1">轻巧便携</strong>
                        <span>多语言讲解语音</span>
                        <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="images-container">
                    <img v-if="contentImg[2]" :src="contentImg[2].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TM601</h2>
                    <h1>巴士多语言讲解系统</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>工业级材料</li>
                        <li>云端服务器管理</li>
                        <li>一键更新所有子机</li>
                        <li>多路语言同步播放互不影响</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[3]"
                :style="{ backgroundImage: `url(${contentImg[3].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>乘客统计</span>
                        <strong class="p1">安装简单</strong>
                        <span>可连接无线话筒</span>
                        <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="text-container">
                    <h2>TM901 VOD</h2>
                    <h1>车载多功能娱乐系统</h1>
                    <strong>音乐 | 电影 | 小游戏</strong>
                    <ul>
                        <li>多语言界面</li>
                        <li>Android系统</li>
                        <li>景点同步讲解</li>
                        <li>四核 CortexTM-A7 处理器</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="images-container">
                    <img v-if="contentImg[4]" :src="contentImg[4].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container2" v-if="contentImg[5]"
                :style="{ backgroundImage: `url(${contentImg[5].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>千兆网口</span>
                        <strong class="p1">结实防震</strong>
                        <span>全隔离信号通道</span>
                        <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="images-container">
                    <img v-if="contentImg[6]" :src="contentImg[6].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>MINI024C</h2>
                    <h1>智能公交报站器</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>云端管理</li>
                        <li>拓展接口丰富</li>
                        <li>智能自动化触发</li>
                        <li>高精度矢量数学对比算法</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
            <div class="content-container1" v-if="contentImg[7]"
                :style="{ backgroundImage: `url(${contentImg[7].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>抗电磁干扰</span>
                        <strong class="p1">即时定位</strong>
                        <span>可连接LED显示屏</span>
                        <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="text-container" style="width: 600px;">
                    <h2>TAMO MONITOR</h2>
                    <h1>LED显示屏</h1>
                    <strong>广告 | 宣传片 | 站点信息</strong>
                    <ul>
                        <li>全网通</li>
                        <li>TFT液晶屏</li>
                        <li>四核 1.2GHz 主频</li>
                        <li>Android 7.1 及以上操作系统</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })"
                        class="service-links">了解更多</a>
                </div>
                <div class="image-container">
                    <img v-if="contentImg[10]" :src="contentImg[10].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
            </div>
            <div class="content-container2" v-if="contentImg[11]"
                :style="{ backgroundImage: `url(${contentImg[11].imageUrl})` }">
                <div class="text-container1">
                    <div class="text-cont1">
                        <span>响应速度快</span>
                        <strong class="p1">金属外壳</strong>
                        <span>标配信息发布系统</span>
                        <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })"
                            class="cont-links">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[12]" :src="contentImg[12].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TAMO HEADSET</h2>
                    <h1>耳机</h1>
                    <strong>舒适聆听体验</strong>
                    <ul>
                        <li>高音质</li>
                        <li>3.5mm接口</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'ej', query: { id: 6 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
    </div>
    <div v-if="screenWidth <= 768">
        <el-carousel v-if="screenWidth <= 400" :interval="3000" arrow="always" :autoplay="true" :loop="true"
            height="200px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
                <img v-if="image.imageUrl" :src="image.imageUrl" alt="carousel image">
            </el-carousel-item>
        </el-carousel>
        <el-carousel v-else :interval="3000" arrow="always" :autoplay="true" :loop="true" height="400px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
                <img v-if="image.imageUrl" :src="image.imageUrl" alt="carousel image">
            </el-carousel-item>
        </el-carousel>
        <div class="service-container">
            <el-row :gutter="10">
                <el-col :xs="24" v-for="(service, index) in services" :key="index">
                    <div class="service-item">
                        <img :src="service.image" alt="" class="service-image">
                        <a href="javascript:void(0);" class="service-title">{{ service.title }}</a>
                        <p class="service-description">{{ service.description }}</p>
                        <a target="_self" @click="$router.push(service.link)" class="service-link">了解更多</a>
                    </div>
                </el-col>
            </el-row>
            <template v-if="options.src">
                <div class="video">
                    <vue3VideoPlay v-bind="options" />
                </div>
            </template>
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[0]" :src="contentImg[0].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2 style="color: #FFA500;">TM241C</h2>
                    <h1>手持式智能导览机</h1>
                    <strong>博物馆 | 城市游 | 景区</strong>
                    <ul>
                        <li>全面触摸屏</li>
                        <li>多种触发模式</li>
                        <li>GPS北斗双模定位</li>
                        <li>电池续航长达12小时</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
        <div class="content-container1" v-if="contentImg[1]"
            :style="{ backgroundImage: `url(${contentImg[1].imageUrl})` }">
        </div>
        <div class="text-container1">
            <div class="text-cont1">
                <span>共享租赁</span>
                <strong class="p1">轻巧便携</strong>
                <span>多语言讲解语音</span>
                <a target="_self" @click="$router.push({ name: 'dljzlxt', query: { id: 1 } })"
                    class="cont-links">了解更多</a>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[2]" :src="contentImg[2].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TM601</h2>
                    <h1>巴士多语言讲解系统</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>工业级材料</li>
                        <li>云端服务器管理</li>
                        <li>一键更新所有子机</li>
                        <li>多路语言同步播放互不影响</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
        <div class="content-container1" v-if="contentImg[3]"
            :style="{ backgroundImage: `url(${contentImg[3].imageUrl})` }">
        </div>
        <div class="text-container1">
            <div class="text-cont1">
                <span>乘客统计</span>
                <strong class="p1">安装简单</strong>
                <span>可连接无线话筒</span>
                <a target="_self" @click="$router.push({ name: 'dyyjjxt', query: { id: 2 } })"
                    class="cont-links">了解更多</a>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[4]" :src="contentImg[4].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TM901 VOD</h2>
                    <h1>车载多功能娱乐系统</h1>
                    <strong>音乐 | 电影 | 小游戏</strong>
                    <ul>
                        <li>多语言界面</li>
                        <li>Android系统</li>
                        <li>景点同步讲解</li>
                        <li>四核 CortexTM-A7 处理器</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
        <div class="content-container1" v-if="contentImg[5]"
            :style="{ backgroundImage: `url(${contentImg[5].imageUrl})` }">
        </div>
        <div class="text-container1">
            <div class="text-cont1">
                <span>千兆网口</span>
                <strong class="p1">结实防震</strong>
                <span>全隔离信号通道</span>
                <a target="_self" @click="$router.push({ name: 'czylxt', query: { id: 3 } })"
                    class="cont-links">了解更多</a>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[6]" :src="contentImg[6].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>MINI024C</h2>
                    <h1>智能公交报站器</h1>
                    <strong>观光车 | 游艇 | 景区小火车</strong>
                    <ul>
                        <li>云端管理</li>
                        <li>拓展接口丰富</li>
                        <li>智能自动化触发</li>
                        <li>高精度矢量数学对比算法</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
        <div class="content-container1" v-if="contentImg[7]"
            :style="{ backgroundImage: `url(${contentImg[7].imageUrl})` }">
        </div>
        <div class="text-container1">
            <div class="text-cont1">
                <span>抗电磁干扰</span>
                <strong class="p1">即时定位</strong>
                <span>可连接LED显示屏</span>
                <a target="_self" @click="$router.push({ name: 'zngjbzq', query: { id: 4 } })"
                    class="cont-links">了解更多</a>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[10]" :src="contentImg[10].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TAMO MONITOR</h2>
                    <h1>LED显示屏</h1>
                    <strong>广告 | 宣传片 | 站点信息</strong>
                    <ul>
                        <li>全网通</li>
                        <li>TFT液晶屏</li>
                        <li>四核 1.2GHz 主频</li>
                        <li>Android 7.1 及以上操作系统</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
        <div class="content-container1" v-if="contentImg[11]"
            :style="{ backgroundImage: `url(${contentImg[11].imageUrl})` }">
        </div>
        <div class="text-container1">
            <div class="text-cont1">
                <span>响应速度快</span>
                <strong class="p1">金属外壳</strong>
                <span>标配信息发布系统</span>
                <a target="_self" @click="$router.push({ name: 'xsp', query: { id: 5 } })" class="cont-links">了解更多</a>
            </div>
        </div>
        <div class="service-container">
            <div class="product-intro-container">
                <div class="image-container">
                    <img v-if="contentImg[12]" :src="contentImg[12].imageUrl" alt="Mobile 1"
                        class="mobile-image left-slide-animation">
                </div>
                <div class="text-container">
                    <h2>TAMO HEADSET</h2>
                    <h1>耳机</h1>
                    <strong>舒适聆听体验</strong>
                    <ul>
                        <li>高音质</li>
                        <li>3.5mm接口</li>
                    </ul>
                    <a target="_self" @click="$router.push({ name: 'ej', query: { id: 6 } })"
                        class="service-links">了解更多</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getList } from '@/api/index';

const options = reactive({
    width: '100%', //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    title: '测试', //视频名称
    src: "", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
})


// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);
// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

// 定义图片数组
const images = ref([])

const services = ref([
    {
        image: "",
        title: '设备和技术',
        description: '工业级制造标准，核心技术持续优化升级。',
        link: "/cp",
    },
    {
        image: "",
        title: '多媒体内容制作',
        description: '文章、音频、视频、地图、辅助功能等。',
        link: "/nrzz",
    },
    {
        image: "",
        title: '应用程序',
        description: '游客统计、导览机租赁状况、巴士位置监控等。',
        link: "/rjxt",
    },
    {
        image: "",
        title: '客服技术答疑',
        description: '专业技术人员，随时解答您在安装使用过程中疑问。',
        link: "/lxwm",
    }
])

const contentImg = ref([]);

// 在组件挂载时获取初始屏幕宽度
onMounted(() => {
    screenWidth.value = window.innerWidth;
    // 获取轮播数据
    getList().then(res => {
    
        images.value = res.data.bannerList.map(item => ({
            imageUrl: item.image_url || '' // 如果 imageUrl 不存在，则设置为空字符串或其他默认值
        }));

        services.value = services.value.map((service, index) => ({
            ...service,
            image: res.data.cp[index]?.image_url || service.image // 如果 image_url 不存在，则保留原有的 image
        }));

        if (res.data.video != null) {
            options.src = res.data.video.image_url || '';
        }

        contentImg.value = res.data.content.map(item => ({
            imageUrl: item.image_url || '' // 如果 imageUrl 不存在，则设置为空字符串或其他默认值
        }));
    });

});

</script>

<style scoped>
.mobile-image {
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 1920px) {
    .content-container2 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 400px;
    }

    .service-image-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 150px;
    }

    :deep(.el-row) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .service-desc-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100px;
    }

    .service-a-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .cont4_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont4_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: bolder;
    }

    .cont4-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        height: 20px;
        margin-top: 60px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont3_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont3_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span1 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
    }

    .cont2_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .text-cont2 {
        display: flex;
        background-color: white;
        width: 900px;
        height: 350px;
        /* margin-top: 55px; */
        /* padding-top: 50px; */
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-cont2 span {
        font-size: 36px;
    }

    .text-container1 {
        display: flex;
        flex-flow: row;
        flex-direction: column;
        align-items: flex-end;
        align-content: center;
        justify-content: center;
        height: 30rem;
    }

    .text-cont1 {
        display: flex;
        background-color: white;
        width: 400px;
        padding-top: 30px;
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 10rem;
    }

    .text-cont1 span {
        font-size: 30px;
        font-weight: bolder;
    }

    .p1 {
        font-size: 25px;
        font-weight: normal;
        line-height: 1.75;
    }

    .content-container1 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .cont-links2 {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 20px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .cont-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont-links:hover {
        background-color: #409eff;
        color: white;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
        margin-left: 30px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }

    .product-intro-container {
        display: flex;
        align-items: center;
        margin-bottom: 70px;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        margin-top: 30px;
        width: 100%;
    }

    .text-container3 {
        min-width: 300px;
        margin-right: 100px;

        strong {
            font-size: 25px;
            font-weight: normal;
            margin-left: 30px;
        }
    }

    .text-container {
        min-width: 300px;

        strong {
            font-size: 25px;
            font-weight: normal;
            margin-left: 30px;
        }
    }

    h2 {
        color: rgb(37, 37, 250);
        font-size: 18px;
    }

    h1 {
        font-size: 30px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    li {
        margin-bottom: 10px;
        margin-left: 30px;
    }

    .video {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

    .service-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 150px;
        margin-top: 100px;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-left: 30px;
    }

    .service-title {
        margin-bottom: 10px;
        font-size: 25px;
        margin-top: 40px;
        color: #b83636;
        height: 70px;
        line-height: 1.75;
        text-decoration: none;
    }

    .service-image {
        max-width: 100%;
        height: auto;
        /* 居中显示 */
        margin: 0 auto;
    }

    p {
        display: flex;
        text-align: left;
        line-height: 1.75;
        font-size: 16px;
        /* 调整文字间距 */
        padding: 0 20px;
    }

    .service-link {
        display: block;
        border: 1px solid black;
        width: 100px;
        margin: 20px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
    }

    .service-link:hover {
        background-color: #409eff;
        color: white;
    }

    .card-content {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        max-width: 506px;
        margin-left: 40px;
    }

    .el-card {
        --el-card-padding: 20px;
    }

    .demonstration {
        color: var(--el-text-color-secondary);
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {
    .content-container2 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 400px;
    }

    .service-image-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 150px;
    }

    :deep(.el-row) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .service-desc-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100px;
    }

    .service-a-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .cont4_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont4_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: bolder;
    }

    .cont4-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        height: 20px;
        margin-top: 60px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont3_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont3_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span1 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
    }

    .cont2_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .text-cont2 {
        display: flex;
        background-color: white;
        width: 900px;
        height: 350px;
        /* margin-top: 55px; */
        /* padding-top: 50px; */
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-cont2 span {
        font-size: 36px;
    }

    .text-container1 {
        display: flex;
        flex-flow: row;
        flex-direction: column;
        align-items: flex-end;
        align-content: center;
        justify-content: center;
        height: 30rem;
    }

    .text-cont1 {
        display: flex;
        background-color: white;
        width: 400px;
        padding-top: 30px;
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 10rem;
    }

    .text-cont1 span {
        font-size: 30px;
        font-weight: bolder;
    }

    .p1 {
        font-size: 25px;
        font-weight: normal;
        line-height: 1.75;
    }

    .content-container1 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .cont-links2 {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 20px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .cont-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont-links:hover {
        background-color: #409eff;
        color: white;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
        margin-left: 30px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }

    .product-intro-container {
        display: flex;
        align-items: center;
        margin-bottom: 70px;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        margin-top: 30px;
        width: 100%;
    }

    .text-container3 {
        min-width: 300px;
        margin-right: 100px;

        strong {
            font-size: 25px;
            font-weight: normal;
            margin-left: 30px;
        }
    }

    .text-container {
        min-width: 300px;
        margin-left: 20%;

        strong {
            font-size: 25px;
            font-weight: normal;
            margin-left: 30px;
        }
    }

    h2 {
        color: rgb(37, 37, 250);
        font-size: 18px;
    }

    h1 {
        font-size: 30px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    li {
        margin-bottom: 10px;
        margin-left: 30px;
    }

    .video {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

    .service-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 150px;
        margin-top: 100px;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-left: 30px;
    }

    .service-title {
        margin-bottom: 10px;
        font-size: 25px;
        margin-top: 20px;
        color: #b83636;
        height: 70px;
        line-height: 1.75;
        text-decoration: none;
    }

    .service-image {
        max-width: 100%;
        height: auto;
        /* 居中显示 */
        margin: 0 auto;
    }

    p {
        display: flex;
        text-align: left;
        line-height: 1.75;
        font-size: 16px;
        /* 调整文字间距 */
        padding: 0 20px;
    }

    .service-link {
        display: block;
        border: 1px solid black;
        width: 100px;
        margin: 20px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
    }

    .service-link:hover {
        background-color: #409eff;
        color: white;
    }

    .card-content {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        max-width: 506px;
        margin-left: 40px;
    }

    .el-card {
        --el-card-padding: 20px;
    }

    .demonstration {
        color: var(--el-text-color-secondary);
    }
}


/* 媒体查询，针对平板电脑（768px - 1280px） */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .content-container2 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 300px;
    }

    .service-image-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 150px;
    }

    :deep(.el-row) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .service-desc-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100px;
    }

    .service-a-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .cont4_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont4_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: bolder;
    }

    .cont4-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 60px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont3_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont3_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span1 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
    }

    .cont2_span2 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .cont2_span3 {
        align-items: center;
        line-height: 40px;
        margin-bottom: 20px;
        font-size: 36px;
        font-weight: normal;
    }

    .text-cont2 {
        display: flex;
        background-color: white;
        width: 900px;
        height: 350px;
        /* margin-top: 55px; */
        /* padding-top: 50px; */
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-cont2 span {
        font-size: 36px;
    }

    .text-container1 {
        display: flex;
        flex-flow: row;
        flex-direction: column;
        align-items: flex-end;
        align-content: center;
        justify-content: center;
        height: 300px;
    }

    .text-cont1 {
        display: flex;
        background-color: white;
        width: 40%;
        height: 200px;
        padding-top: 30px;
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 100px;
    }

    .text-cont1 span {
        font-size: 30px;
        font-weight: bolder;
    }

    .p1 {
        font-size: 25px;
        font-weight: normal;
        line-height: 1.75;
    }

    .content-container1 {
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .cont-links2 {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 20px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .cont-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont-links:hover {
        background-color: #409eff;
        color: white;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 15px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
        margin-left: 30px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }

    .product-intro-container {
        display: flex;
        align-items: center;
        margin-bottom: 70px;
        flex-direction: row;
        align-content: center;
        justify-content: center;
    }

    .text-container {
        width: 60%;
        margin-left: 40px;

        strong {
            font-size: 25px;
            font-weight: normal;
            margin-left: 30px;
        }
    }

    .image-container {
        width: 100%;
    }

    h2 {
        color: rgb(37, 37, 250);
        font-size: 18px;
    }

    h1 {
        font-size: 30px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    li {
        margin-bottom: 10px;
        margin-left: 30px;
    }

    .video {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

    .service-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        padding: 0px 100px;
        margin-top: 50px;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 500px;
    }

    .service-title {
        margin-bottom: 10px;
        font-size: 25px;
        margin-top: 20px;
        color: #b83636;
        /* 去除下划线 */
        height: 70px;
        text-decoration: none;
    }

    .service-image {
        width: 150px;
        height: auto;
        /* 居中显示 */
        margin: 0 auto;
    }

    p {
        display: flex;
        text-align: left;
        line-height: 1.75;
        font-size: 16px;
        /* 调整文字间距 */
        padding: 0 20px;
    }

    .service-link {
        display: block;
        border: 1px solid black;
        width: 128px;
        /* height: 40px; */
        margin: 20px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .service-link:hover {
        background-color: #409eff;
        color: white;
    }

    .card-content {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        max-width: 506px;
        margin-left: 40px;
    }

    .el-card {
        --el-card-padding: 20px;
    }

    .demonstration {
        color: var(--el-text-color-secondary);
    }
}

@media screen and (max-width: 768px) {
    .el-carousel__item img {
        max-width: 100%;
        height: auto;
    }

    .service-container {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }

    .text-container1 {
        display: flex;
        flex-flow: row;
        flex-direction: row;
        align-content: center;
        justify-content: center;
    }

    .text-cont1 {
        display: flex;
        background-color: white;
        height: 270px;
        align-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-cont1 span {
        font-size: 36px;
        font-weight: bolder;
        margin-left: 20px;
    }

    .p1 {
        font-size: 25px;
        margin-left: 20px;
        font-weight: normal;
        margin-top: 10px;
    }

    .content-container1 {
        width: 100%;
        height: 250px;
        margin: 25px 0px;
        background-size: 100% 200px;
        width: 100%;
        background-repeat: no-repeat;
    }

    .cont-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin-top: 60px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .cont-links:hover {
        background-color: #409eff;
        color: white;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }

    .product-intro-container {
        display: flex;
        padding: 20px;
        margin: 0 auto;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .text-container {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;

        strong {
            font-size: 25px;
            font-weight: normal;
        }
    }

    h2 {
        color: rgb(37, 37, 250);
        font-size: 18px;
    }

    h1 {
        font-size: 40px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    li {
        margin-bottom: 10px;
    }

    .image-container img {
        width: 300px;
    }

    .video {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 300px;
        margin: 20px auto;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .service-title {
        margin-bottom: 10px;
        font-size: 25px;
        margin-top: 20px;
        color: #b83636;
        /* 去除下划线 */
        text-decoration: none;
    }

    .service-image {
        max-width: 100%;
        height: auto;
        /* 居中显示 */
        margin: 0 auto;
    }

    p {
        display: flex;
        text-align: left;
        line-height: 1.75;
        font-size: 16px;
        /* 调整文字间距 */
        padding: 0 20px;
    }

    .service-link {
        /* 变成块元素 */
        display: block;
        /* 1实线边框 */
        border: 1px solid black;
        /* 宽128px 高40px */
        width: 100px;
        margin: 20px auto;
        /* 字体20px */
        font-size: 12px;
        /* 居中 */
        text-align: center;
        /* 字体padding */
        padding: 10px 0;
    }

    .service-link:hover {
        background-color: #409eff;
        color: white;
    }

    .card-content {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        max-width: 506px;
        margin-left: 40px;
    }

    .el-card {
        --el-card-padding: 20px;
    }

    .demonstration {
        color: var(--el-text-color-secondary);
    }
}
</style>